<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0; padding: 0; border: none;}
			ul, li {list-style: none;}
			#box {
				width: 600px;
				height: 300px;
				margin: 100px auto;
				overflow: hidden;
				border: 10px solid blue;
				position: relative;
			}
			#list1 {
				width: 3100px;
				height: 300px;
				position: absolute;
				left: 0;
				top: 0;
			}
			#list1 li, #list1 img {
				width: 600px;
				height: 300px;
			}
			#list1 li {
				float: left;
			}
			#list2  {
				width: 150px;
				height: 20px;
				position: absolute;
				right: 30px;
				bottom: 30px;
			}
			#list2 li {
				width: 18px;
				height: 18px;
				border: 1px solid black;
				background: yellow;
				text-align: center;
				line-height: 18px;
				margin-left: 5px;
				float: left;
				cursor: pointer;
			}
			
			#list2 li.active {
				background: green;
			}
			
			#prev, #next {
				width: 50px;
				height: 22px;
				background: orange;
				position: absolute;
				top: 45%;
				cursor: pointer;
			} 
			#prev {
				left: 10px;
			}
			#next {
				right: 10px;
			}
			
		</style>
		<script src="js/jquery-1.12.3.js"></script>
		<script>
			$(function(){
				
				//先获取轮播图的数据
				$.get("json/lunbotu.json", function(data){
					//console.log(d); 
					
					var arr = data;
					
					for (var i=0; i<arr.length; i++) {
						var obj = arr[i];
						
						$("<li><img src="+ obj.img +" ></li>").appendTo("#list1");
						var li = $("<li>"+ (i+1) +"</li>").appendTo("#list2");
						
						if (i==0) {
							li.addClass("active");
						}
					}
					
					//轮播
					lunbo();
				})
				
				//jq轮播图
				function lunbo(){
					
					var list1 = $("#list1");
					var list2 = $("#list2");
					var li1 = $("#list1 li");
					var li2 = $("#list2 li");
					
					//复制第一张图到最后
					li1.first().clone(true).appendTo(list1);
					
					//
					var size = $("#list1 li").size();
					list1.width(600*size);
					
					//开启定时器
					var i = 0;
					var timer = setInterval(function(){
						i++;
						move();
					}, 2000);
					
					function move(){
						
						if (i < 0) {
							list1.css("left", -600*(size-1));
							i = size-2;
						}
						
						if (i >= size){
							list1.css("left", 0);
							i = 1;
						}
						
						list1.stop().animate({left:-i*600}, 500);
						
						li2.eq(i).addClass("active").siblings().removeClass("active");
						if (i == size-1) {
							li2.eq(0).addClass("active").siblings().removeClass("active");
						}
					}
					
					//上一页
					$("#prev").click(function(){
						i--;
						move();
					})
					
					//下一页
					$("#next").click(function(){
						i++;
						move();
					})
					
					li2.mouseenter(function(){
						i = $(this).index();
						move();
					})
					
					$("#box").hover(function(){
						clearInterval(timer);
					}, 
					function(){
						timer = setInterval(function(){
							i++;
							move();
						}, 2000);
					})
				}
				
			})
		</script>
	</head>
	<body>
		<div id="box">
			<ul id="list1">
				<!--<li><img src="images/b1.jpg" /></li>
				<li><img src="images/b2.jpg" /></li>
				<li><img src="images/b3.jpg" /></li>
				<li><img src="images/b4.jpg" /></li>-->
			</ul>
			<ul id="list2">
				<!--<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>-->
			</ul>
			<div id="prev">上一页</div>
			<div id="next">下一页</div>
		</div>
	</body>
</html>
